<template>
  <div>
    <div>{{ system.name }}</div>
    <div class="row" v-for="i in mapArray">
      <div class="col" :style="{
        width: `calc(${clientHeight}px / ${system.mapWidth})`,
        height: `calc(${clientHeight}px / ${system.mapWidth})`,
      }" v-for="j in i">
        {{ j ? j : "" }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const clientHeight = ref(window.document.documentElement.clientHeight - 200);
window.onresize = () => {
  clientHeight.value = window.document.documentElement.clientHeight - 200;
};
const system = reactive({
  name: "血刀门",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  masterName: "",
  mapWidth: 11,
});
const mapArray = ref(
  new Array(system.mapWidth)
    .fill({})
    .map((item) => new Array(system.mapWidth).fill(0))
);
mapArray.value[Math.round(system.mapWidth / 2) - 1][
  Math.round(system.mapWidth / 2) - 1
] = "主殿";
</script>
